.vbestui-tool-tip {
  display: inline-block;
  position: relative;
}

.vbestui-bubble {
  padding: 8px;
  border-radius: 4px;
  position: absolute;
  width: 100%;
  z-index: 998;
}

.vbestui-triangle {
  width: 0px;
  height: 0px;
  border: solid;
  border-width: 0px 10px 10px 10px;
  border-color: transparent transparent #585e6b transparent;
  position: absolute;
}

.vbestui-triangle-item {
  width: 0px;
  height: 0px;
  border: solid;
  position: absolute;
  left: -9px;
  top: 1px;
  border-width: 0px 9px 9px 9px;
  border-color: transparent transparent #fff transparent;
}

.vbestui-bubble-theme-dark {
  background: #585e6b;
  color: #fff;
}

.vbestui-bubble-theme-light {
  background: #fff;
  box-shadow: 0 0 2px var(--border-tint);
  color: var(--text-color);
}

[class*="vbestui-bubble-placement-bottom"] {
  margin-top: 12px;
}

[class*="vbestui-bubble-placement-top"] {
  bottom: calc(100% + 12px);
}

[class*="vbestui-bubble-placement-left"] {
  right: calc(100% + 18px);
}

.vbestui-bubble-placement-left {
  top: 50%;
  transform: translateY(-50%);
}

.vbestui-bubble-placement-left-start {
  top: 0px;
}

.vbestui-bubble-placement-left-end {
  bottom: 0px;
}

[class*="vbestui-bubble-placement-right"] {
  left: calc(100% + 18px);
}

.vbestui-bubble-placement-right {
  top: 50%;
  transform: translateY(-50%);
}

.vbestui-bubble-placement-right-start {
  top: 0px;
}

.vbestui-bubble-placement-right-end {
  bottom: 0px;
}

.vbestui-triangle-bottom {
  top: -10px;
  left: 0px;
  right: 0px;
  margin: auto;
}

.vbestui-triangle-bottom-start {
  top: -10px;
  left: calc(10%);
}

.vbestui-triangle-bottom-end {
  top: -10px;
  right: calc(10%);
}

[class*="vbestui-triangle-top"] {
  border-top-width: 10px;
  border-bottom-width: 0px;
  border-color: #585e6b transparent;
  bottom: -10px;
  left: 0px;
  right: 0px;
  margin: auto;
}

[class*="vbestui-triangle-item-top"] {
  border-width: 9px 9px 0px 9px;
  border-color: #fff transparent;
  bottom: 0px;
  top: -10px;
  left: -9px;
}

.vbestui-triangle-top-start {
  left: calc(-70%);
}

.vbestui-triangle-top-end {
  left: calc(70%);
}

[class*="vbestui-triangle-left"] {
  border-width: 10px 0px 10px 10px;
  border-color: transparent transparent transparent #585e6b;
  right: -10px;
}

[class*="vbestui-triangle-item-left"] {
  border-width: 9px 0px 9px 9px;
  border-color: transparent #fff;
  top: -9px;
  left: -10px;
}

.vbestui-triangle-left-start {
  top: 8px;
}

.vbestui-triangle-left-end {
  bottom: 8px;
}

[class*="vbestui-triangle-right"] {
  border-width: 10px 10px 10px 0px;
  border-color: transparent #585e6b transparent transparent;
  left: -10px;
}

[class*="vbestui-triangle-item-right"] {
  border-width: 9px 9px 9px 0px;
  border-color: transparent #fff;
  top: -9px;
  left: 1px;
}

.vbestui-triangle-right {
  top: 0px;
  bottom: 0px;
  margin: auto;
}

.vbestui-triangle-right-start {
  top: 8px;
}

.vbestui-triangle-right-end {
  bottom: 8px;
}

.tooltip-fade-enter-active {
  animation: baseFade 0.5s;
}

.tooltip-fade-leave-active {
  animation: baseFade 0.5s reverse;
}